<template>
	<view class="main">
		<view class="header">
			<view class="tit">排行榜</view>
			<view class="seleBox">
				<view class="sele" @tap="show = true">
					<view class="in">
						<span>{{ date }}</span>
						<image src="@/static/img/wright.png" mode=""></image>
					</view>
				</view>
				<view class="sele" @tap="show1 = true">
					<view class="in">
						<span>{{ txt }}</span>
						<image src="@/static/img/wright.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="listBox">
			<u-empty v-if="list.length == 0 && isShow" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无排行信息"></u-empty>
			<view v-else class="box">
				<view class="myInfo" v-if="userInfo.is_leader != 1 && userInfo.is_manager != 1">
					<view class="num">{{info.rank}}</view>
					<view class="info">
						<!-- <image src="@/static/img/ceshi.jpg" mode=""></image> -->
						<view class="name">{{info.username}}</view>
					</view>
					<view class="right">
						<view>{{info.num}}</view>
						<view class="hr"></view>
						<view>{{info.total}}</view>
					</view>
				</view>
				<ul class="list">
					<li>
						<view class="msg one">排名</view>
						<view class="msg two">姓名</view>
						<view class="msg two">通话时常</view>
						<view class="msg for">通话数量</view>
					</li>
					<li v-for="(item, index) in list" :key="index">
						<view class="one son">
							<image v-if="index == 0" src="@/static/img/image1.png" mode=""></image>
							<image v-else-if="index == 1" src="@/static/img/image2.png" mode=""></image>
							<image v-else-if="index == 2" src="@/static/img/image3.png" mode=""></image>
							<span v-else>{{ index + 1 }}</span>
						</view>
						<view class="two son">{{item.username}}</view>
						<view class="for son">{{item.num}}</view>
						<view class="for son">{{item.total}}</view>
					</li>
				</ul>
			</view>
		</view>
		<u-datetime-picker
			:show="show"
			v-model="value1"
			mode="date"
			:maxDate="maxDate"
			@cancel="show = false"
			@close="show = false"
			@confirm="dateconfirm"
			:closeOnClickOverlay="true"></u-datetime-picker>
		<u-picker :show="show1" :columns="columns" @cancel="show1 = false" @close="show1 = false" :closeOnClickOverlay="true" keyName="name" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
import { WorkList, innerinfo } from '@/api/inner.js';
export default {
	data() {
		return {
			show: false,
			value1: Number(new Date()),
			maxDate: Number(new Date()),
			date: '',
			type: 1, //1为上午2为下午
			txt:'上午',
			show1:false,
			columns:[
				[
					{
						name:'上午',
						id:1
					},
					{
						name:'下午',
						id:2
					}
				]
			],
			userInfo: {},
			info:{},
			list:[],
			isShow:false
		};
	},
	onLoad() {
		this.getInfo();
		let now = new Date();
		let y = now.getFullYear();
		let m = now.getMonth() + 1;
		let d = now.getDate();
		this.date = `${y}-${m}-${d}`;
		this.getList();
	},
	methods: {
		confirm(e){
			this.txt = e.value[0].name
			this.type = e.value[0].id
			this.getList()
			this.show1 = false
		},
		dateconfirm(){
			let date = new Date(e.value)
			let y = date.getFullYear()
			let m = date.getMonth() + 1
			let d = date.getDate();
			this.date = `${y}-${m}-${d}`
			this.getList()
			this.show = false
		},
		async getInfo() {
			let res = await innerinfo();
			this.userInfo = res.data;
		},
		async getList() {
			this.isShow = false
			let res = await WorkList({
				date: this.date,
				type: this.type
			});
			this.info = res.data.info
			this.list = res.data.list
			this.isShow = true
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	min-height: calc(100vh - 44px);
	background-image: url('@/static/img/rankBg2.png');
	background-repeat: no-repeat;
	background-position: top -44px;
	background-size: 100% 288px;
	display: flex;
	flex-direction: column;
	/deep/.u-popup__content {
		border-radius: 20px;
	}
	.header {
		padding: 120px 20px 10px;
		.tit {
			font-size: 48px;
			font-weight: 700;
			font-style: oblique;
			background: linear-gradient(90deg, #fff6e9 0%, #fff7d7 100%);
			-webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
			-webkit-text-fill-color: transparent; /*给文字设置成透明*/
			margin-bottom: 20px;
		}
		.seleBox{
			display: flex;
			justify-content: space-between;
			.sele {
				display: flex;
				.in {
					display: flex;
					align-items: center;
					padding: 8px 10px;
					color: #fff;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 1000px;
					border: 1px solid rgba(255, 255, 255, 0.15);
					font-size: 12px;
					image {
						width: 14px;
						height: 14px;
						margin-left: 5px;
					}
				}
			}
		}
		
	}
	.listBox {
		flex: 1;
		background-color: #fff;
		border-radius: 20px 20px 0 0;
		padding: 15px 10px;
		.myInfo {
			background: #ffffff;
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
			border-radius: 5px;
			padding: 10px 15px;
			display: flex;
			align-items: center;
			.num {
				font-size: 14px;
				color: #097ff6;
			}
			.info {
				display: flex;
				align-items: center;
				margin-left: 20px;
				flex: 1;
				image {
					width: 40px;
					height: 40px;
					border-radius: 100px;
					margin-right: 8px;
				}
				.name {
					font-size: 14px;
					color: #232323;
				}
			}
			.right {
				display: flex;
				align-items: center;
				.hr {
					width: 1px;
					height: 30px;
					background-color: #e5e5e5;
					margin: 0 8px;
				}
			}
		}
		.list {
			padding: 15px 10px 0;
			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
				color: #3d3d3d;
				padding: 15px 0;
				.msg {
					width: 25%;
					color: #a4a5a9;
				}
				.son {
					width: 25%;
				}
				.one {
					text-align: left;
					color: #a4a5a9;
					image {
						width: 30px;
						height: 30px;
					}
				}
				.two {
					text-align: center;
				}
				.for {
					text-align: right;
				}
			}
			li:first-child {
				padding: 0;
			}
		}
	}
}
</style>
